<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>减肥大师 - 食物识别</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        .recognition-container {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .tabs {
            display: flex;
            border-bottom: 1px solid #f0f0f0;
            margin-bottom: 16px;
        }
        
        .tab {
            flex: 1;
            text-align: center;
            padding: 12px;
            font-size: 14px;
            font-weight: 600;
            color: #6B7280;
        }
        
        .tab.active {
            color: #22C55E;
            border-bottom: 2px solid #22C55E;
        }
        
        .camera-view-container {
            width: 100%;
            aspect-ratio: 4/3;
            background-color: #000;
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            margin-bottom: 16px;
        }
        
        .camera-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 16px;
        }
        
        .camera-top-controls {
            display: flex;
            justify-content: space-between;
        }
        
        .camera-control-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        
        .camera-bottom-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .shutter-btn {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }
        
        .shutter-btn-inner {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: 2px solid #f0f0f0;
        }
        
        .food-result {
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 16px;
        }
        
        .food-result-header {
            display: flex;
            align-items: center;
            background-color: #DCFCE7;
            padding: 16px;
        }
        
        .food-result-img {
            width: 80px;
            height: 80px;
            border-radius: 12px;
            object-fit: cover;
            margin-right: 16px;
            border: 3px solid white;
        }
        
        .food-result-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .food-result-calories {
            font-size: 14px;
            color: #22C55E;
            font-weight: 500;
        }
        
        .nutrition-list {
            padding: 16px;
            background-color: white;
        }
        
        .nutrition-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .nutrition-item:last-child {
            border-bottom: none;
        }
        
        .nutrition-name {
            font-size: 14px;
            color: #374151;
        }
        
        .nutrition-value {
            font-size: 14px;
            font-weight: 500;
            color: #111827;
        }
        
        .tips-container {
            background-color: #F9FAFB;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
        }
        
        .tips-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }
        
        .tips-title i {
            color: #FDBA74;
            margin-right: 8px;
        }
        
        .similar-foods {
            display: flex;
            overflow-x: scroll;
            padding-bottom: 8px;
            margin: 16px 0;
        }
        
        .similar-food-item {
            flex: 0 0 100px;
            margin-right: 12px;
            text-align: center;
        }
        
        .similar-food-img {
            width: 100px;
            height: 100px;
            border-radius: 12px;
            object-fit: cover;
            margin-bottom: 8px;
        }
        
        .similar-food-name {
            font-size: 12px;
            color: #374151;
        }
        
        .action-buttons {
            display: flex;
            margin-top: 24px;
        }
        
        .action-btn {
            flex: 1;
            margin-right: 12px;
        }
        
        .action-btn:last-child {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="phone-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-time">14:30</div>
            <div class="status-bar-icons">
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi"></i>
                <i class="fas fa-battery-three-quarters"></i>
            </div>
        </div>
        
        <!-- 导航栏 -->
        <div class="nav-bar">
            <div class="nav-title">食物识别</div>
            <button class="nav-btn"><i class="fas fa-history"></i></button>
        </div>
        
        <!-- 内容区域 -->
        <div class="content-container">
            <div class="recognition-container">
                <!-- 标签切换 -->
                <div class="tabs">
                    <div class="tab active">拍照识别</div>
                    <div class="tab">相册选择</div>
                </div>
                
                <!-- 相机视图 -->
                <div class="camera-view-container">
                    <img src="https://images.unsplash.com/photo-1555939594-58d7cb561ad1?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="相机预览" style="width: 100%; height: 100%; object-fit: cover;">
                    
                    <div class="camera-overlay">
                        <div class="camera-top-controls">
                            <button class="camera-control-btn"><i class="fas fa-bolt"></i></button>
                            <button class="camera-control-btn"><i class="fas fa-ellipsis-h"></i></button>
                        </div>
                        
                        <div class="camera-bottom-controls">
                            <button class="camera-control-btn"><i class="fas fa-images"></i></button>
                            <div class="shutter-btn">
                                <div class="shutter-btn-inner"></div>
                            </div>
                            <button class="camera-control-btn"><i class="fas fa-sync-alt"></i></button>
                        </div>
                    </div>
                </div>
                
                <!-- 识别结果 -->
                <div class="food-result">
                    <div class="food-result-header">
                        <img src="https://images.unsplash.com/photo-1555939594-58d7cb561ad1?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="牛油果沙拉" class="food-result-img">
                        <div>
                            <div class="food-result-name">牛油果沙拉</div>
                            <div class="food-result-calories">约 245 卡路里 / 份</div>
                        </div>
                    </div>
                    
                    <div class="nutrition-list">
                        <div class="nutrition-item">
                            <div class="nutrition-name">蛋白质</div>
                            <div class="nutrition-value">5.8g</div>
                        </div>
                        <div class="nutrition-item">
                            <div class="nutrition-name">脂肪</div>
                            <div class="nutrition-value">21g</div>
                        </div>
                        <div class="nutrition-item">
                            <div class="nutrition-name">碳水化合物</div>
                            <div class="nutrition-value">12.5g</div>
                        </div>
                        <div class="nutrition-item">
                            <div class="nutrition-name">纤维素</div>
                            <div class="nutrition-value">4.6g</div>
                        </div>
                    </div>
                </div>
                
                <!-- 健康提示 -->
                <div class="tips-container">
                    <div class="tips-title">
                        <i class="fas fa-lightbulb"></i> 健康小提示
                    </div>
                    <p class="text-sm text-gray-600">牛油果富含健康脂肪和纤维，可以帮助您保持饱腹感更长时间。搭配少量坚果食用，能够提供更多的营养价值。</p>
                </div>
                
                <!-- 相似食物推荐 -->
                <div>
                    <div class="text-sm font-semibold mb-2">相似食物推荐</div>
                    <div class="similar-foods">
                        <div class="similar-food-item">
                            <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="蔬菜沙拉" class="similar-food-img">
                            <div class="similar-food-name">蔬菜沙拉</div>
                            <div class="text-xs text-green-500">180 卡路里</div>
                        </div>
                        
                        <div class="similar-food-item">
                            <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="水果沙拉" class="similar-food-img">
                            <div class="similar-food-name">水果沙拉</div>
                            <div class="text-xs text-green-500">210 卡路里</div>
                        </div>
                        
                        <div class="similar-food-item">
                            <img src="https://images.unsplash.com/photo-1505253758473-96b7015fcd40?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="素食沙拉" class="similar-food-img">
                            <div class="similar-food-name">素食沙拉</div>
                            <div class="text-xs text-green-500">195 卡路里</div>
                        </div>
                        
                        <div class="similar-food-item">
                            <img src="https://images.unsplash.com/photo-1607532941433-304659e8198a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="藜麦沙拉" class="similar-food-img">
                            <div class="similar-food-name">藜麦沙拉</div>
                            <div class="text-xs text-green-500">255 卡路里</div>
                        </div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <button class="btn-primary action-btn">添加到今日饮食</button>
                    <button class="btn-outline action-btn">重新识别</button>
                </div>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tab-bar">
            <div class="tab-item" onclick="location.href='home.html'">
                <i class="tab-icon fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item active">
                <i class="tab-icon fas fa-camera"></i>
                <span>识别</span>
            </div>
            <div class="tab-item" onclick="location.href='diet-plan.html'">
                <i class="tab-icon fas fa-utensils"></i>
                <span>饮食</span>
            </div>
            <div class="tab-item" onclick="location.href='exercise-plan.html'">
                <i class="tab-icon fas fa-dumbbell"></i>
                <span>运动</span>
            </div>
            <div class="tab-item" onclick="location.href='profile.html'">
                <i class="tab-icon fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
    
    <script>
        // 更新状态栏时间
        function updateTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.querySelector('.status-bar-time').textContent = `${hours}:${minutes}`;
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateTime();
            setInterval(updateTime, 60000);
            
            // 标签切换
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html> 